<template>
	<el-form  ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto"
		v-loading="isLoading">
		<el-row :gutter="30">
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.modelName' prop='modelName'>
					<el-input v-model.trim='formInline.modelName' clearable :placeholder='prompt?.modelName'
						:maxlength="30" show-word-limit />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.modelDesc' prop='modelDesc'>
					<el-input :maxlength="100" :show-word-limit="true" v-model='formInline.modelDesc' :autosize="{ minRows: 4 }" type="textarea" clearable
						:placeholder='prompt?.modelDesc' />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.battery' prop='battery'>
					<batterySelect v-model='formInline.battery' clearable :placeholder='prompt?.battery'
						:style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'battery')"/>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.scriptType' prop='scriptType'>
					<el-radio-group v-model='formInline.scriptType'>
						<el-radio v-for="item in SCRIPT_TYPE" :key="item.value" :value="item.value">
							{{ isNullOrEmpty( item.label ) }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24' v-if='formInline.scriptType === 1'>
				<el-form-item :label='titles?.modelScriptPath' prop='modelScriptPath'>
					<UploadFile v-model:files='formInline.modelScriptPath' :limit="1" accept=".js" :preview="preview"></UploadFile>
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import batterySelect from '@/components/select/batterySelect/batterySelect.vue'
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/product-management/product-type/product-model/index';
import { SCRIPT_TYPE } from '@/constant/product-management'
import UploadFile from '@/components/ReUpload/UploadFile.vue'
import { formValidateField } from '@/utils/functions'
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const formRules = reactive(<FormRules>{
	id: [{ required: true, message: prompt?.id, trigger: 'blur' },],
	productId: [{ required: true, message: prompt?.productId, trigger: 'blur' },],
	modelName: [{ required: true, message: prompt?.modelName, trigger: 'blur' },],
	modelDesc: [{ required: false, message: prompt?.modelDesc, trigger: 'blur' },],
	battery: [{ required: true, message: prompt?.battery, trigger: 'blur' },],
	scriptType: [{ required: true, message: prompt?.scriptType, trigger: 'blur' },],
	modelScriptPath: [{ required: true, message: prompt?.modelScriptPath, trigger: 'blur' },],
});
const ruleFormRef = ref();
const preview = (file: any) => {
  window.open(file.url)
  // const link = document.createElement('a')
  // link.style.display = 'none'
  // link.href = 'https://' + window.location.host + file.url
  // link.setAttribute('download', `${props.formInline?.productName}.js`)
  // document.body.appendChild(link)
  // link.click()
  // link.remove()
}
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
